<?php
/**
 * Created by PhpStorm.
 * User: PanChaoZhi
 * Date: 2017/1/21
 * Time: 20:13
 */
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .table {
            border-collapse: collapse;
            width: 100%;
            font-size: 14px;
        }

        .table th {
            background-color: #E8E8E8;
        }

        .table th, .table td {
            border: solid 1px #ccc;
            padding: 8px;
        }

        .label, .check {
            vertical-align: middle;
        }

        .check {
            margin-right: 4px;
        }

        .btn {
            padding: 4px 16px;
            background-color: #E8E8E8;
            margin: 0 10px;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        .btn:hover {
            background-color: #ccc;
        }
    </style>
    <script src="scripts/jquery-1.6.js"></script>
</head>
<body>
<table class="table" cellspacing="0" cellpadding="0">
    <thead>
    <tr>
        <th bgcolor="#ffffff">商品名称</th>
        <th bgcolor="#ffffff">市场价</th>
        <th bgcolor="#ffffff">本店价</th>
        <th bgcolor="#ffffff">购买数量</th>
        <th bgcolor="#ffffff">小计</th>
        <th bgcolor="#ffffff">操作</th>
    </tr>
    </thead>
    <tbody>

    <?php
    session_start();
    try {
        $pdo = new PDO('mysql:host=localhost;dbname=shopimooc', 'root', 'localhost', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
        $pdo->query('set names utf8');
        //name,mPrice,iPrice都是在商品表中，而数量是在购物车表中，因此要进行关联查询
        $sql = "SELECT p.id,p.pName,p.mPrice,p.iPrice,c.num FROM imooc_pro p RIGHT JOIN imooc_cart c ON p.id=c.pro_id WHERE c.user_id=?";
        $stmt = $pdo->prepare($sql);
        $userid = $_SESSION['login_id'];
        $stmt->execute(array($userid));
        $datas = $stmt->fetchAll(PDO::FETCH_ASSOC);
        //echo '<pre>'.print_r($datas,1).'</pre>';
        if ($datas) {
    ?>
    <?php $totalPrice = 0;
    foreach ($datas as $data): ?>
        <tr id="delete-<?php echo $data['id']; ?>" class="clearCart">
            <!--这里的id和for里面的c1 需要循环出来-->
            <td>
                <?php echo $data['pName']; ?>
            </td>

            <td align="center" bgcolor="#ffffff">￥<?php echo $data['mPrice']; ?></td>
            <td align="center" bgcolor="#ffffff">￥<span
                    id="price-<?php echo $data['id']; ?>"><?php echo $data['iPrice']; ?></span></td>
            <td align="center" bgcolor="#ffffff">
这里用到了onblur事件，还有一个id，当鼠标离开输入框的时候，触发changeNum()方法
传两个参数过去，一个是id，一个是输入的值
                <input type="text" name="input_numbers" value="<?php echo $data['num']; ?>" size="4"
                       style="text-align: center" onblur="changeNum(<?php echo $data['id']; ?>, this.value)"
                       id="number-<?php echo $data['id']; ?>">
            </td>
            <td align="center" bgcolor="#ffffff">￥<span class="totalPrice"
                                                        id="totalPrice-<?php echo $data['id']; ?>"><?php echo $data['iPrice'] * $data['num']; ?></span>
            </td>
            <td align="center" bgcolor="#ffffff">
                <a href="javascript:deletePro(<?php echo $data['id']; ?>);" class="btn">删除</a>
            </td>
        </tr>
        <?php $totalPrice += $data["iPrice"] * $data["num"]; endforeach; ?>


    <script type="text/javascript">
        function changeNum(productid, num) {
            var url = 'changeNum.php';
            var data = {'productid': productid, 'num': num};
            var success = function (response) {
                //
                if (response.errno == 0) {
                    var price = ($("#number-" + productid).val()) * ($("#price-" + productid).html());
                    $("#totalPrice-" + productid).html(price);

                    setTotal(productid);
                }
            };
            $.post(url, data, success, "json");
        }

        function setTotal(productid) {
            var total = "";
            var price = ($("#number-" + productid).val()) * ($("#price-" + productid).html());
            $("#totalPrice-" + productid).html(price).each(function () {
                total += $("#totalPrice-" + productid).html();

            });

            $("#total").html(total);
        }

        function deletePro(productid) {
            var url = "deletePro.php";
            var data = {'productid': productid};
            var success = function (response) {
                //
                if (response.errno == 0) {
                    $("#delete-" + productid).remove();
                    setTotal();
                }
            };
            $.post(url, data, success, "json");


        }
    </script>
    </tbody>
</table>
<hr color="red"/>
<button class="btn">总价:￥<span id="total"><?php echo $totalPrice; ?></span></button>
<input class="btn" type="button" value="清空购物车" onclick="clearCart()">
<?php
} else{
    echo "您的购物车空空如也！";
}
} catch (PDOException $e) {
    echo $e->getMessage();
}
?>

<script type="text/javascript">
    function clearCart() {
        var url = "clearCart.php";
        var success = function (response) {
            if (response.errno == 0) {
                $(".clearCart").remove();
            }
        };
        $.post(url, success, "json");
    }
</script>
</body>
</html>

